<template>
  <div class="home_box" >
         <form v-show="this.$store.state.searchForm" class="searchForm" action="/">
          <van-search
            class="search"
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
          />
        </form>
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                       <!--内容...-->

      <div class="home">
   
        <div class="Swipe_Box">
          <Swipe :loop="true" class="Swipe" :autoplay="3000" indicator-color="white">
            <SwipeItem v-for="(image, index) in images" :key="index" class="SwipeItem">
              <img :src="image.SwipeImg" alt />
            </SwipeItem>
          </Swipe>
        </div>
        <!-- 活动区 -->
        <div class="Activity_area">
          <div class="Activity" @click="routePuth(interests)">
            <img src="../assets/images/activityImages/h-3.png" alt />
            <div class="Activity_Title">会员权益</div>
          </div>
          <div class="Activity" @click="routePuth(activity)">
            <img src="../assets/images/activityImages/h-2.png" alt />
            <div class="Activity_Title">门店活动</div>
          </div>
          <div class="Activity" @click="routePuth(Spike)">
            <img src="../assets/images/activityImages/h-4.png" alt />
            <div class="Activity_Title">秒杀</div>
          </div>
          <div class="Activity" @click="routePuth(Secondary)">
            <img src="../assets/images/activityImages/h-5.png" alt />
            <div class="Activity_Title">次卡</div>
          </div>
        </div>
        <!-- 全部商品 all products -->
        <div class="all_products">
          <div class="all_products_Title">全部商品</div>

          <div class="products_Box">
            <div class="products_List" v-for="(item, index) in dataList" :key="index">
              <div class="products_Img_Box">
                <img :src="item.img" alt />
              </div>
              <div class="Details_Title_Box">
                <div class="prompt">
                  <div class="name">画风类型：{{item.title}}</div>
                </div>
                <div class="price_Box">
                  <div class="priceName">价格：</div>
                  <div class="price">{{item.price}}</div>
                  <Button @click="BuyNow(item.id)" class="drop_out" type="danger">立即购买</Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </van-list>
</van-pull-refresh> 

   
  </div>
</template>

<script>
// @ is an alias to /src

import { Swipe, SwipeItem, Grid, GridItem, Button } from "vant";
import { mapState } from "vuex";

export default {
  data() {
    return {
      // 权益
      interests: "interests",
      // 活动
      activity: "activity",
      // 次卡
      Secondary: "Secondary",
      // 秒杀
      Spike: "Spike",
      checked: true,
      value: "",
      images: "",
      list: "",
      dataList:[],
      loading: false,
      finished: false,
      refreshing: false,
      height:"",
      use:true
    };
  },
  computed: {
    //这里的三点叫做 : 扩展运算符
    ...mapState({})
  },
  name: "Home",
  components: {
    Swipe,
    SwipeItem,
    Grid,
    GridItem,
    Button
 
  },
 
  beforeCreate: function() {
    // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    
  },

  created: function() {
    // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。
    this.click();
    this.GetStart(this.pathuiL);

  },
  beforeMount: function() {},

  methods: {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。
    click() {
      this.$store.state.Title = "首页";
      this.$store.state.arrow = false;
      this.$store.state.LeftTitle = "";
      this.height = "height:" + window.innerHeight-20% + "px";
     
      // this.notify("调用成功");
    },
    onChange(value) {
      this.checked = event.detail;
    },

    GetStart(api) {
     
      const THIS = this;
      THIS.axios
        .get(api + "startData")
        .then(function(response) {
          // handle success
          THIS.images = response.data.swipe;
   

     
        })
        .catch(function(error) {
          // handle error
 
          console.log(error);
         
        })
        .then(function() {
          // always executed
        });
    },
    onSearch(val) {
      this.Toast(val);
    },
    onCancel() {
      this.Toast("取消");
    },

    routePuth(Puth) {
      this.ToastFunction(Puth);
    },
    // 立即购买
    BuyNow(id) {
      let Puth = "/Details/";

      this.ToastFunction(Puth, id);
    },
     onLoad() {
      setTimeout(() => {
       const number = 5;
      
 
      this.axios
        .get(this.pathuiL+"allproductList?id_gte=1&id_lte="+number, {
      
        })
        .then(response => {
         console.log( response.data.length)
             if(response.data.length>0){
                 this.dataList = response.data;
                 this.refreshing = false
                 this.loading = true

                  
             }
            
           
            
        })
        .catch(e => {
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
         console.log(e)
        });
      }, 500);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    }
   

  }
};
</script>
<style lang="scss" scope>
@import "../assets/css/style.scss";
.home_box {
  width: 100%;
  position: relative;
  height: 100%;
   overflow-x: hidden;
}
.text {
  font-size: 0.5rem;
}

.home {
  width: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.searchForm {
  width: 100%;
  height: 1rem;
  opacity: 0.7;
  z-index: 99;
  position: fixed;
}

.van-search__content {
  border-radius: 0.5rem;
  padding-left: 0.3rem;
}
.van-swipe {
  width: 100%;
  height: 5.6rem;
}
.Swipe .SwipeItem {
  color: #fff;
  font-size: 20px;
  // line-height: 150px;
  text-align: center;
  // background-color: #39a9ed;
  width: 100%;
  height: 4rem;
}
.Swipe_Box {
  width: 100%;
  height: 5.6rem;
 
}
.SwipeItem > img {
  width: 100%;
  height: 100%;
}

// 活动区
.Activity_area {
  width: 100%;
  height: 2rem;
  background-color: #333333;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
.Activity {
  height: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.Activity > img {
  width: 50%;
  height: 72%;
}
.Activity_Title {
  width: 100%;
  height: 0.5rem;
  font-size: 0.2rem;
  text-align: center;
  letter-spacing: 1px;
  color: #e1dfe0;
  margin-top: 0.2rem;
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
}
// 全部商品
.all_products {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.all_products_Title {
  height: 1rem;
  width: 95%;
  background-color: #ffff;
  margin-top: 0.5rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.45rem;
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
}
.products_Box {
  width: 95%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}
.products_List {
  width: 45%;
  height: 7rem;
  padding: 0.2rem;
  background-color: #ffff;
  margin-top: 0.2rem;
}
.products_Img_Box {
  width: 100%;
  height: 80%;
  img {
    width: 100%;
    height: 100%;
  }
}
.Details_Title_Box {
  width: 100%;
  height: 20%;
}
.prompt {
  background-color: whitesmoke;
  color: #333333;
  width: 100%;
  height: 0.6rem;
  line-height: 0.75rem;
  display: flex;
  flex-wrap: nowrap;
}
.name {
  color: green;
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 0.35rem;
  align-self: flex-start;
}
.content {
  color: red;
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
  font-weight: 100;
  letter-spacing: 1px;
  font-size: 0.3rem;
}
.price_Box {
  height: 0.8rem;
  line-height: 0.8rem;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.price {
  margin-left: -1.4rem;
  color: red;
}
.priceName {
  color: green;
}
.van-button--normal {
  padding: 2px;
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
  font-weight: 100;
  letter-spacing: 1px;
  font-size: 0.3rem;
  height: 0.5rem;
  line-height: 0.4rem;
}
.mescroll {
			   position: fixed;
			    top: 0;
			    bottom: 0;
          height: auto;
          width:100%;
			  }
</style>